<template>
    <div>
        <el-form label-position="left" label-width="100px" size="mini" inline @submit.native.prevent>
            <el-form-item label="站点ID" label-width="60px">
                <el-input v-model="grabSource.station_id" size="mini" style="width: 80px" @keyup.enter.native="search" title="支持回车查询"></el-input>
            </el-form-item>
            
            <el-form-item label="是否激活" label-width="70px">
                <el-select v-model="grabSource.status" placeholder="请选择" size="mini" style="width: 80px" @change="search">
                    <el-option label="全部" value="" key=""></el-option>
                    <el-option label="是" value="1" key="1"></el-option>
                    <el-option label="否" value="0" key="0"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="资讯类型" label-width="70px">
                <el-select v-model="grabSource.info_type_id" style="width:150px;" placeholder="请选择" filterable @change="search">
                    <el-option label="全部" value="" key=""></el-option>
                    <el-option v-for="item in infoTypeList" :label="item.info_type_name" :value="item.info_type_id" :key="item.info_type_id" >
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="分类" label-width="50px">
                <el-select v-model="grabSource.category_id" style="width:300px;" placeholder="请选择" filterable @change="search">
                    <el-option label="全部" value="" key=""></el-option>
                    <el-option v-for="item in categoryList" :label="`${item.category_id}--${item.category_name}`" :value="item.category_id" :key="item.category_id" >
                        <span style="float: left">{{ item.category_id }}--{{ item.category_name }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">层级：{{ item.category_level }}</span>
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="站点中文名" label-width="80px">
                <el-input v-model="grabSource.station_name_cn" size="mini" style="width: 150px" @keyup.enter.native="search" title="支持回车查询">
                </el-input>
            </el-form-item>

            <el-form-item label="入口url" label-width="70px">
                <el-input v-model="grabSource.entry_url" size="mini" style="width: 200px" @keyup.enter.native="search" title="支持回车查询">
                </el-input>
            </el-form-item>
            
            <el-form-item label="是否包含该规则" label-width="120px">
                <el-select v-model="grabSource.config_list" placeholder="请选择" filterable @change="search">
                    <el-option label="全部" value="" key=""></el-option>
                    <el-option
                    v-for="item in ruleList"
                    :key="item.config_id"
                    :label="`${item.config_id}--${item.desc}`"
                    :value="item.config_id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="业务详情" label-width="80px">
                <el-select v-model="grabSource.businessId" placeholder="请选择" filterable @change="search">
                    <el-option label="全部" value="" key=""></el-option>
                    <el-option
                    v-for="item in businessDetailsList"
                    :key="item.businessId"
                    :label="`${item.businessId}--${item.busName}`"
                    :value="item.businessId">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="爬虫系统" label-width="80px">
                <el-select v-model="grabSource.crawler_type" placeholder="请选择" size="mini" style="width: 80px" @change="search">
                    <el-option label="全部" value="" key=""></el-option>
                    <el-option label="老" value="1" key="1"></el-option>
                    <el-option label="新" value="2" key="2"></el-option>
                </el-select>
            </el-form-item>

            <el-button type="primary" size="mini" @click="search">查询&nbsp;<c-icon name="search" scale="0.7"></c-icon></el-button>
            <el-button type="danger" size="mini" @click="reset">重置&nbsp;<c-icon name="undo" scale="0.7"></c-icon></el-button>
        </el-form>
        <el-table :data="grabSourceList.slice((pageNo -1) * pageSize, ((pageNo -1) * pageSize) + pageSize)" 
            @sort-change = "sortChange"
            v-loading="listLoading" element-loading-text="列表加载中..." style="width: 100%" max-height="650" border fit highlight-current-row>
            <el-table-column align="center" width="120px" prop="" label="操作" fixed>
                <template slot-scope="scope">
                    <el-button type="text" size="mini" icon="edit" @click="$router.push(`/grabSourceConf/${scope.row.station_id}`)" title="编辑">编辑</el-button>
                    <!--<el-button type="text" size="mini" icon="delete" @click="" title="删除">删除</el-button>-->
                </template>
            </el-table-column>
            <el-table-column align="center" width="100px" prop="station_id" label="站点ID" fixed sortable='custom'></el-table-column>
            <el-table-column align="center" width="100px" prop="status" label="是否激活" sortable='custom'>
                <template slot-scope="scope">
                    <c-icon v-if="scope.row.status == 1" name="check" style="color:#00AE66;"></c-icon>
                    <c-icon v-else name="times" style="color:#e74c3c;"></c-icon>
                </template>
            </el-table-column>
            <el-table-column align="left" width="250px" prop="station_name_cn" label="站点中文名" show-overflow-tooltip fixed sortable='custom'></el-table-column>
            <el-table-column align="left" width="100px" prop="businessId" label="业务详情" show-overflow-tooltip sortable='custom'></el-table-column>
            <el-table-column align="left" width="600px" prop="entry_url" label="入口url" show-overflow-tooltip sortable='custom'></el-table-column>
            <el-table-column align="center" width="150px" prop="dataSource.data_source_name" label="数据源" show-overflow-tooltip sortable='custom'></el-table-column>
            <el-table-column align="center" width="150px" prop="infoType.info_type_name" label="资讯类型名称" show-overflow-tooltip sortable='custom'></el-table-column>
            <el-table-column align="center" width="150px" prop="category.category_name" label="分类名称" show-overflow-tooltip sortable='custom'></el-table-column>
            <el-table-column align="center" width="100px" prop="grab_freq" label="抓取频率" sortable='custom'></el-table-column>
            <el-table-column align="center" width="120px" prop="edit_system_id" label="编辑平台ID" sortable='custom'></el-table-column>
            <el-table-column align="center" width="100px" prop="crawler_type" label="爬虫系统" sortable='custom'>
                <template slot-scope="scope">
                    {{scope.row.crawler_type == 1 ? '老' : '新'}}
                </template>
            </el-table-column>
            <el-table-column align="left" width="200px" prop="config_list" label="规则ID" sortable='custom'>
                <template slot-scope="scope">
                    <span v-if="scope.row.config_list && scope.row.config_list!=null && scope.row.config_list.length > 0">
                        <span v-for="(configId, index) in scope.row.config_list.split(',')">
                            <label v-if="index > 0"><i class="el-icon-caret-right"></i></label>
                            <a :href="`//${hostname}/crawl/ruleConf/${configId}`" target="_blank" title="点击查看该规则详情">{{configId}}</a>
                        </span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column align="center" width="150px" prop="main_list_name" label="调度主队列" sortable='custom'></el-table-column>
            <el-table-column align="center" width="130px" prop="grab_timer" label="抓取时间限制" sortable='custom'></el-table-column>
            <el-table-column align="center" width="120px" prop="station_degree" label="站点优先级" sortable='custom'></el-table-column>
            <el-table-column v-for="(col, index) in booleanColumns" :key="index" align="center" :prop="col.prop"
                             width="200px" :label="col.label" sortable='custom'>
                <template slot-scope="scope">
                    <c-icon v-if="scope.row[col.prop] == 1" name="check" style="color:#00AE66;"></c-icon>
                    <c-icon v-else name="times" style="color:#e74c3c;"></c-icon>
                </template>
            </el-table-column>
            <el-table-column align="center" width="100px" prop="crawlerInfo" label="是否处理" sortable='custom'>
                <template slot-scope="scope">
                    <label v-if="scope.row.crawlerInfo == 1" style="color:#e74c3c;">未处理</label>
                    <label v-else style="color:#00AE66;">已处理</label>
                </template>
            </el-table-column>
            <el-table-column align="center" width="100px" prop="creator" label="创建人" sortable='custom'></el-table-column>
            <el-table-column align="center" width="150px" prop="creat_time" label="创建时间" sortable='custom'>
                <template slot-scope="scope">
                    {{formatDate(scope.row.creat_time)}}
                </template>
            </el-table-column>
            <el-table-column align="center" width="100px" prop="updator" label="更新人" sortable='custom'></el-table-column>
            <el-table-column align="center" width="150px" prop="update_time" label="更新时间" sortable='custom'>
                <template slot-scope="scope">
                    {{formatDate(scope.row.update_time)}}
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="start" style="padding:10px 0;">
            <el-pagination
                v-show = "grabSourceList.length"
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="pageNo"
                :page-sizes="[30, 50, 100, 200]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="grabSourceList.length">
            </el-pagination>
        </el-row>
    </div>
</template>
<script>
import { getGrabSourceList, getRuleList, getInfoTypeList, getCategoryList, getBusinessDetailsList } from '../../api/crawl.js';
import dayjs from 'dayjs';
import icon from 'vue-awesome';
import lodash from 'lodash';
export default {
    data(){
        return {
            listLoading : false,
            grabSourceList : [],
            allGrabSourceList : [],
            ruleList : [],
            infoTypeList: [],
            categoryList: [],
            businessDetailsList : [],
            booleanColumns : [//布尔类型的字段，汇总
                {prop : 'is_download_attachment', label : '是否下载附件'},
                {prop : 'is_parser_attachment', label : '是否解析附件'},
                {prop : 'is_download_vedio', label : '是否下载音视频'},
                {prop : 'is_handle_content', label : '是否处理文本'},
                {prop : 'is_handle_pic', label : '是否处理图片'},
                {prop : 'is_handle_table', label : '是否处理表格'},
                {prop : 'is_norm_handle', label : '是否清洗'},
                {prop : 'is_segment', label : '是否分词'},
                {prop : 'is_semantic_analysis', label : '是否语义分析'},
                {prop : 'is_auto_labeling', label : '是否自动标签'},
                {prop : 'is_remove_duplication', label : '是否去重'},
                {prop : 'is_autoabstract', label : '是否自动摘要'},
                {prop : 'is_need_edit', label : '是否需要编辑'},
                {prop : 'is_force_edit', label : '是否强制编辑'},
                {prop : 'is_corpus', label : '是否作为语料保存到hdfs'},
                {prop : 'is_text_mining', label : '是否进行文本挖掘'},
            ],
            /* 分页相关 */
            pageNo : 1,
            pageSize : 30,
            /* 查询 */
            grabSource : {
                station_id : '',
                station_name_cn : '',
                entry_url : '',
                data_source_id : '',
                grab_freq : '',
                info_type_id : '',
                category_id : '',
                is_parser_attachment : '',
                is_norm_handle : '',
                is_segment : '',
                is_auto_labeling : '',
                is_remove_duplication : '',
                is_autoabstract : '',
                status : '',
                crawler_type : '',
                config_list : '',
                main_list_name : '',
                grab_timer : '',
                station_degree : '',
            },
            hostname : location.hostname,//域名
        }
    },
    components: { 
        'c-icon' : icon
    },
    created(){
        this.initRuleList();
        this.initGrabSourceList();
        this.initInfoTypeList();
        this.initCategoryList();
        this.initBusinessDetailsList();
    },
    watch: {
    },
    methods: {
        initGrabSourceList(){
            this.listLoading = true;
            getGrabSourceList().then(data=>{
                console.log('getGrabSourceList---', data)
                this.listLoading = false;
                this.grabSourceList = data.rows;
                this.allGrabSourceList = data.rows;
            })
        },
        initRuleList(){
            getRuleList().then(data=>{
                this.ruleList = data.rows;
            })
        },
        initInfoTypeList(){
            getInfoTypeList().then(data=>{
                this.infoTypeList = data.rows;
                this.infoTypeList = this.infoTypeList.filter(item => Number(item.status) === 1 );
            })
        },
        initCategoryList(){
            getCategoryList().then(data=>{
                this.categoryList = data.rows;
            })
        },
        initBusinessDetailsList(){
            getBusinessDetailsList().then(data=>{
                this.businessDetailsList = data.rows;
                this.businessDetailsList = this.businessDetailsList.filter(item => Number(item.isValid) === 1 );
            }).catch(e=>{
                console.log(e);
            });
        },
        formatDate(dateTime){
            if(!dateTime){
                return '--';
            }
            return dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss');
        },
        sizeChange(pageSize){
            this.pageSize = pageSize;
        },
        currentChange(pageNo){
            this.pageNo = pageNo;
        },
        //排序
        sortChange(data){
            console.log(data)
            let {order, prop} = data;
            //如果是顺序则按照顺序排，否则就按照倒序排
            if(order === 'descending'){
                this.grabSourceList = lodash.orderBy(this.grabSourceList, [prop], 'desc');
            }else{
                this.grabSourceList = lodash.orderBy(this.grabSourceList, [prop], 'asc');
            }
            this.pageNo = 1;
        },
        search(){
            let resultList = this.allGrabSourceList;
            console.log('this.grabSource------', this.grabSource)
            if(this.grabSource.station_id){
                resultList = resultList.filter(item => item.station_id === Number(this.grabSource.station_id));
            }
            if(this.grabSource.status){
                resultList = resultList.filter(item => item.status === Number(this.grabSource.status));
            }
            if(this.grabSource.station_name_cn){
                resultList = resultList.filter(item => item.station_name_cn.toLowerCase().indexOf(this.grabSource.station_name_cn.toLowerCase()) > -1);
            }
            if(this.grabSource.entry_url){
                resultList = resultList.filter(item => item.entry_url.toLowerCase().indexOf(this.grabSource.entry_url.toLowerCase()) > -1);
            }
            if(this.grabSource.config_list){
                resultList = resultList.filter(item => item.config_list && item.config_list.split(',').includes(this.grabSource.config_list.toString()));
            }
            if(this.grabSource.category_id){
                resultList = resultList.filter(item => item.category_id === Number(this.grabSource.category_id));
            }
            if(this.grabSource.info_type_id){
                resultList = resultList.filter(item => item.info_type_id === Number(this.grabSource.info_type_id));
            }
            if(this.grabSource.businessId){
                resultList = resultList.filter(item => item.businessId.split(',').includes(this.grabSource.businessId.toString()));
            }
            if(this.grabSource.crawler_type){
                resultList = resultList.filter(item => item.crawler_type === Number(this.grabSource.crawler_type));
            }
            this.grabSourceList = resultList;
            this.pageNo = 1;
        },
        reset(){
            this.grabSource.station_id = '';
            this.grabSource.status = '';
            this.grabSource.station_name_cn = '';
            this.grabSource.entry_url = '';
            this.grabSource.config_list = '';
            this.grabSource.category_id = '';
            this.grabSource.info_type_id = '';
            this.grabSource.businessId = '';
            this.grabSource.crawler_type = '';
            this.initGrabSourceList();
            this.pageNo = 1;
        },
    }
};
</script>